
<template>
  <el-button v-bind="$attrs" :loading="loadingStatus" @click="handleClick">
    <slot />
  </el-button>
</template>

<script>
export default {
  name: "srm-button",
  data() {
    return {
      loadingStatus: false,
    };
  },
  props: {
    autoLoading: {
      type: Boolean,
      default: false,
    },

    autoConfirm: {
      type: Boolean,
      default: false,
    },

    confirmConfig: {
      type: Object,
      default: () => ({}),
    },
  },

  methods: {
    handleClick() {
      if (this.autoLoading) {
        this.loadingStatus = true;
      }

      if (this.autoConfirm) {
        const {
          message = "此操作将永久删除该数据, 是否继续?",
          title = "提示",
          confirmButtonText = "确定",
          cancelButtonText = "取消",
          type = "warning",
        } = this.confirmConfig;

        this.$confirm(message, title, {
          confirmButtonText,
          cancelButtonText,
          type,
        })
          .then(() => {
            this.$emit("confirm");
          })
          .catch(() => {
            this.$emit("cancel");
          });
      } else {
        this.$emit("click", () => {
          // 传一个回调函数去父组件执行
          this.loadingStatus = false;
        });
      }
    },
  },
};
</script>

<style>
</style>